<template>
<view class="page-wrap" :data-theme="theme" :class="theme" :style="globalColor.style">
	<HeadCustom title="视频介绍" :isAppBtn="false"></HeadCustom>
	<view class="content-wrap">
		<view class="examine-tips font24 fboxRow Ycenter" v-if="fromData.auditStatus == 0">审核中：1~2个工作日内反馈，请及时关注</view>
		<view class="examine-tips font24 fboxRow Ycenter" v-if="fromData.auditStatus == 2">视频介绍中含有敏感词汇，请及时修改</view>
		<view class="card bg-base">
			<view class="hd fboxRow Ycenter font32">
				<view class="flex1">设置视频介绍</view>
				<view class="switch" v-if="fromData.auditStatus == 1">
					<u-switch v-model="fromData.isShow" inactiveColor="#E8EDF1" activeColor="#CC9870"
						:activeValue="1" :inactiveValue="0" @change="offChange"></u-switch>
				</view>
			</view>
			<view class="bd">
				<view v-if="!fromData.resumeUrl" class="not flex1 color-969699 font28">
					<view class="not-item fboxRow Ycenter Xcenter bg-base">
						<!-- 
						<view class="fboxCol flex1 Ycenter Xcenter" @click="goPage(3)">
							<image class="icon" src="https://ebc-prod.cdn.benwunet.com/uni-static/img3.5.0/recruit/video-film.png" mode="aspectFill"></image>
							<view class="tit mt16 font28 lh40">拍摄视频</view>
						</view> -->
						<view class="fboxCol flex1 Ycenter Xcenter" @click="changeVideo">
							<image class="icon" src="https://ebc-prod.cdn.benwunet.com/uni-static/img3.5.0/recruit/video-upload.png" mode="aspectFill"></image>
							<view class="tit mt16 font28 lh40">导入视频</view>
						</view>
					</view>
				</view>
				<view class="video-wrap" v-if="fromData.resumeUrl">
					<view class="close" @click="del"><text class="bwfont bw-shibai"></text></view>
					<video class="video-inner" :src="fromData.resumeUrl" :poster="resumePoster"></video>
				</view>
			</view>
		</view>
	</view>
</view>
</template>
<script>
import { resumeVideoDetail, resumeAudioVideoDel, resumeAudioVideoUpdate, resumeAudioVideoShow } from '@/api/recruit.js';
import {fileUploadAnon, ossMpc} from '@/api/index.js'
export default {
	data() {
		return {
			theme: getApp().globalData.appTheme,
			globalColor: getApp().globalData.globalColor,
			fromData: {
				"auditStatus": 10,
				"id": "",
				"isShow": 0,
				"memberId": "",
				"resumeContent": "",
				"resumeType": 0,
				"resumeUrl": "",
				"type": 0
			},
			resumePoster: '' // 视频封面图
		}
	},
	onLoad(option) {
		this.getDetail()
	},
	mounted() {
		// #ifdef H5
		window.appFileCallback = this.appFileCallback;
		// #endif
	},
	methods: {
		// 更新视频简历
		updateDetail(){
			let reqData = {
				"resumeContent": "",
				"resumeType": 1,
				"resumeUrl": this.fromData.resumeUrl
			}
			if(this.fromData.id){ reqData.id = this.fromData.id }
			resumeAudioVideoUpdate(reqData).then(res=>{
				if (res.data) {
					// uni.showToast({
					// 	icon: 'none',
					// 	title: '设置成功'
					// })
					this.getDetail()
				}
			})
		},
		// 是否展示视频简历
		offChange(e){
			console.log(e)
			if(this.fromData.id){
				resumeAudioVideoShow({
					"id": this.fromData.id,
					"isShow": e
				}).then(res=>{
					if (res.data) {
						uni.showToast({
							icon: 'none',
							title: '设置成功'
						})
					}
				})
			}else{
				uni.showToast({
					icon: 'none',
					title: '请先上传视频简历'
				})
			}
		},
		// 获取音频信息
		getDetail() {
			resumeVideoDetail().then(res => {
				this.fromData = res.data
				// 获取封面图 ios封面图没有需要根据接口获取
				if(res.data.resumeUrl){
					ossMpc({url: res.data.resumeUrl}).then(res=>{
						this.resumePoster = res.data
					})
				}
			})
		},
		// 删除接口
		del() {
			resumeAudioVideoDel({ id: this.fromData.id }).then(res => {
				if (res.data) {
					uni.showToast({
						icon: 'none',
						title: '删除成功'
					})
					this.getDetail()
				}
			})
		},
		// 选择视频
		changeVideo(){
			const { bw_link } = getApp().getBWData(['bw_link']);
			if (bw_link.isApp) {
				// app兼容进行交互
				const data = { type: 'fileUpload', action: 'contentVideo' };
				let that = this;
				this.$bridge.callHandler('recruitHandler', data, res => {
					console.log('recruitHandler  ', '返回');
					that.appFileCallback(res);
				});
			} else {
				// #ifdef H5
				//选择音频文件
				uni.chooseFile({
					count: 1,   //选取的文件个数限制
					extension: [".mp4"],  //可定义允许哪些后缀的文件可被选择
					success: (res)=> {
						let tempFilePaths = res.tempFiles[0];
						const name = tempFilePaths.name || tempFilePaths.path
						if(name.indexOf(".mp4") == name.length - 4) {
							this.uploadAudio(tempFilePaths)
						}else{
						  uni.showToast({
							icon: 'none',
							title: '请选择MP4文件'
						  })
						}
					},
				});
				// #endif
				// #ifdef MP-WEIXIN
				// 从微信聊天消息中选择文件
				wx.chooseMessageFile({
					count: 1,   //选取的文件个数限制
					type: 'file',  //可定义允许哪些后缀的文件可被选择
					extension: ["mp4"],
					success: (res)=> {
						let tempFilePaths = res.tempFiles[0];
						const name = tempFilePaths.name || tempFilePaths.path
						if(name.indexOf(".mp4") == name.length - 4) {
							this.uploadAudio(tempFilePaths)
						}else{
						  uni.showToast({
							icon: 'none',
							title: '请选择MP4文件'
						  })
						}
					}
				})
				// #endif
			}
		},
		// app上传视频回调
		appFileCallback(res) {
			console.log('res==>', res.fileUrl, res.action);
			if (res.action == 'contentVideo') {
				this.fromData.resumeUrl = res.fileUrl
				this.updateDetail()
			}
		},
		// 上传音频
		uploadAudio(file){
			uni.showLoading({
				title: '上传中',
				mask: true
			})
			// 上传音频文件
			fileUploadAnon(file).then(res=>{
				if(res.data){
					this.fromData.resumeUrl = res.data.url
					this.updateDetail()
				}
			}).finally(err=>{
				uni.hideLoading()
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.examine-tips {margin-bottom: 20rpx; padding: 0 22rpx;width: 670rpx;height: 58rpx;background: #e56d55;border-radius: 4rpx;color: var(--contentBgImageTitleColor);}
.content-wrap {
	padding: 60rpx 40rpx;
	// height: calc(100vh);
}
.not-item{ padding: 0 40rpx;}
.not-item .icon{width: 96rpx;height: 96rpx}
.not-item .tit{margin-top: 16rpx;}

.card {
	padding: 24rpx 32rpx;
	background-color: var(--viewBgColor);
	border-radius: 12rpx;
}

.card .hd {height: 44rpx;}
.card .not{padding: 74rpx 0 10rpx;}




.switch {
	transform: scale(0.8);
	margin-right: -14rpx;
}

.input-tips {
	padding: 15rpx 40rpx;
	line-height: 32rpx;
}
.video-wrap{margin: 34rpx 2rpx 16rpx;position: relative;}
.video-wrap .close{color: var(--contentFontFiveColor);position: absolute;right: 26rpx;top: 24rpx;z-index: 2;}
.video-inner{
	position: relative;z-index: 0;
	width: 600rpx;
	height: 650rpx;
	background: #F4F8FB;
	border-radius: 12rpx
}
</style>
